<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      perspective: 2000px;
    }
    .box{
      position: relative;
      width: 300px;
      height: 200px;
      margin: 200px auto;
      transform-style: preserve-3d;
      animation: rotate 3s linear infinite;
    }
    .box div{
      position: absolute;
      top: 0;
      right: 0;
      background: url("../img/dog.jpg");
      width: 100%;
      height: 100%;
    }
    .box div:nth-child(1){
      transform: translateZ(300px);
    }
    .box div:nth-child(2){
      transform: rotateY(60deg) translateZ(300px);
    }
    .box div:nth-child(3){
      transform: rotateY(120deg) translateZ(300px);
    }
    .box div:nth-child(4){
      transform:rotateY(180deg) translateZ(300px);
    }
    .box div:nth-child(5){
      transform:rotateY(240deg) translateZ(300px);
    }
    .box div:nth-child(6){
      transform:rotateY(300deg) translateZ(300px);
    }
    @keyframes rotate {
      0%{
        transform: rotateY(0deg);
    }
      100%{
        transform: rotateY(360deg);
      }
    }
    .box:hover{
      animation-play-state:paused ;
    }
  </style>
</head>
<body>
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div><img  style="width: 300px;height: 200px;" src="../img/pig.jpg"></div>
</div>
</body>
</html>
